<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            .swiper-button-prev {
                  margin-left: 150px;
               
            }
            .swiper-button-next {
                  margin-right: 150px;
            }
      </style>
      <!-- <link rel="stylesheet" href="../static/libs/css/index.css"> -->
      <link rel="stylesheet" href="./css/index.css">
      <link rel="stylesheet" href="../static/libs/css/swiper.css">
</head>
<body>
      <header>
            <div class="container">
                  <p>
                        <a href="./index.html">Hi,欢迎来到洋码头！</a>
                        <a href="./login.html">我是买手</a>
                  </p>
                  <ul>
                        <li><a href="./login.html">登录</a></li>
                        <li><a href="./register.html">注册</a></li>
                        <li><a href="#">购物车</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">个人中心</a></li>
                        <li><a href="#">规则&公告</a></li>
                  </ul>
            </div>
            
      </header>

     <!-- 楼梯 -->

     
     
      <div class="search container">
            <div class="logo">
                  <a href="#">
                        <img src="https://s2.ymatou.com/home/4aa0780b5ffeee46a01f132052fdb71a.png" alt="">
                  </a>
                  <form action="#">
                        <input type="text" id="ipt" autocomplete="off" placeholder="搜索你想要的商品">
                        <button id="btn"></button>
                        <ul id="lists">
                        </ul>
                  </form>  
            </div>
      </div>
      <!-- list部分 -->
      <ul class="list container">
            <li>
                  <a href="./index.html">首页</a>
            </li>
            <li>
                  <a href="#">今日限时抢</a>
            </li>
            <li>
                  <a href="#">洋货集</a>
            </li>
            <li class="items">
                  <a href="#" id="menu" >分类
                  <img src="https://s2.ymatou.com/home/1cb1fe20152e19748e6cc8b52cc8fcbb.png" alt=""></a>
                  <ul class="sort">
                  </ul>
            </li>
      </ul>
      <!-- banner部分 -->
      <div class="swiper-container banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="https://pic1.ymatou.com/G03/M02/31/AE/CgzUIF8O-OCAX_YkAAFnmsmN5Gw049_3_1_o.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://img1.baidu.com/it/u=3254861374,3440797381&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
                <div class="swiper-slide"><img src="https://img1.baidu.com/it/u=1903706688,725693173&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

      <!-- item部分 -->
      <div class="item">
            <ul class="container">
                  <li>
                        <img src="https://s2.ymatou.com/home/53b158cd870da6051cde733eb923acd5.png" alt="">
                        <p>海外正品</p>
                  </li>
                  <li>
                        <img src="https://s2.ymatou.com/home/53b158cd870da6051cde733eb923acd5.png" alt="">
                        <p>严格监管</p>
                  </li>
                  <li>
                        <img src="https://s2.ymatou.com/home/53b158cd870da6051cde733eb923acd5.png" alt="">
                        <p>买手认证</p>
                  </li>
                  <li>
                        <img src="https://s2.ymatou.com/home/53b158cd870da6051cde733eb923acd5.png" alt="">
                        <p>售后无忧</p>
                  </li>
            </ul>
      </div>
      <!-- 全球必买清单 -->
      <div class="global container">
           <div class="more">   
                 <div class="title">
                       <span></span>
                        <h3>全球必买清单</h3>
                 </div>
                  <a href="#" id="even">
                        更多<span></span>        
                  </a>
           </div>
           <ul>
                 <li class="one">
                       <a href="#">
                             <img src="https://s2.ymatou.com/home/96ff898d2be07cba4cefba818af15804.png" alt="">
                              <p><span>Armani口红，给你更自信的气场</span></p>
                              <i>来自 16 位买手 | 26 件商品</i>
                        </a>
                 </li>
                 <li>
                        <a href="#">
                              <img src="https://pic1.ymatou.com/G02/upload/product/original/M01/61/B6/CgvUBFeGMoaAcBX7AAC_wjXT7d8798_n_w_l.jpg" alt="">
                              <p>Dior/迪奥真我淡香氛淡香水女士50m EDT优雅女士</p>
                              <i>￥499</i>
                              <em>西班牙</em>
                        </a>
                  </li>
                  <li>
                        <a href="#">
                              <img src="https://pic1.ymatou.com/G02/upload/product/original/M01/61/B6/CgvUBFeGMoaAcBX7AAC_wjXT7d8798_n_w_l.jpg" alt="">
                              <p>Dior/迪奥真我淡香氛淡香水女士50m EDT优雅女士</p>
                              <i>￥499</i>
                              <em>西班牙</em>
                        </a>
                  </li>
                  <li>
                        <a href="#">
                              <img src="https://pic1.ymatou.com/G02/upload/product/original/M01/61/B6/CgvUBFeGMoaAcBX7AAC_wjXT7d8798_n_w_l.jpg" alt="">
                              <p>Dior/迪奥真我淡香氛淡香水女士50m EDT优雅女士</p>
                              <i>￥499</i>
                              <em>西班牙</em>
                        </a>
                  </li>
                  <li>
                        <a href="#">
                              <img src="https://pic1.ymatou.com/G02/upload/product/original/M01/61/B6/CgvUBFeGMoaAcBX7AAC_wjXT7d8798_n_w_l.jpg" alt="">
                              <p>Dior/迪奥真我淡香氛淡香水女士50m EDT优雅女士</p>
                              <i>￥499</i>
                              <em>西班牙</em>
                        </a>
                  </li>
           </ul>

           <ul>
            <li class="one">
                  <a href="#">
                        <img src="https://s2.ymatou.com/home/96ff898d2be07cba4cefba818af15804.png" alt="">
                         <p><span>Armani口红，给你更自信的气场</span></p>
                         <i>来自 16 位买手 | 26 件商品</i>
                   </a>
            </li>
            <li>
                   <a href="#">
                         <img src="https://pic1.ymatou.com/G02/upload/product/original/M01/61/B6/CgvUBFeGMoaAcBX7AAC_wjXT7d8798_n_w_l.jpg" alt="">
                         <p>Dior/迪奥真我淡香氛淡香水女士50m EDT优雅女士</p>
                         <i>￥499</i>
                         <em>西班牙</em>
                   </a>
             </li>
             <li>
                   <a href="#">
                         <img src="https://pic1.ymatou.com/G02/upload/product/original/M01/61/B6/CgvUBFeGMoaAcBX7AAC_wjXT7d8798_n_w_l.jpg" alt="">
                         <p>Dior/迪奥真我淡香氛淡香水女士50m EDT优雅女士</p>
                         <i>￥499</i>
                         <em>西班牙</em>
                   </a>
             </li>
             <li>
                   <a href="#">
                         <img src="https://pic1.ymatou.com/G02/upload/product/original/M01/61/B6/CgvUBFeGMoaAcBX7AAC_wjXT7d8798_n_w_l.jpg" alt="">
                         <p>Dior/迪奥真我淡香氛淡香水女士50m EDT优雅女士</p>
                         <i>￥499</i>
                         <em>西班牙</em>
                   </a>
             </li>
             <li>
                   <a href="#">
                         <img src="https://pic1.ymatou.com/G02/upload/product/original/M01/61/B6/CgvUBFeGMoaAcBX7AAC_wjXT7d8798_n_w_l.jpg" alt="">
                         <p>Dior/迪奥真我淡香氛淡香水女士50m EDT优雅女士</p>
                         <i>￥499</i>
                         <em>西班牙</em>
                   </a>
             </li>
      </ul>
      <ul>
            <li class="one">
                  <a href="#">
                        <img src="https://s2.ymatou.com/home/96ff898d2be07cba4cefba818af15804.png" alt="">
                         <p><span>Armani口红，给你更自信的气场</span></p>
                         <i>来自 16 位买手 | 26 件商品</i>
                   </a>
            </li>
            <li>
                   <a href="#">
                         <img src="https://pic1.ymatou.com/G02/upload/product/original/M01/61/B6/CgvUBFeGMoaAcBX7AAC_wjXT7d8798_n_w_l.jpg" alt="">
                         <p>Dior/迪奥真我淡香氛淡香水女士50m EDT优雅女士</p>
                         <i>￥499</i>
                         <em>西班牙</em>
                   </a>
             </li>
             <li>
                   <a href="#">
                         <img src="https://pic1.ymatou.com/G02/upload/product/original/M01/61/B6/CgvUBFeGMoaAcBX7AAC_wjXT7d8798_n_w_l.jpg" alt="">
                         <p>Dior/迪奥真我淡香氛淡香水女士50m EDT优雅女士</p>
                         <i>￥499</i>
                         <em>西班牙</em>
                   </a>
             </li>
             <li>
                   <a href="#">
                         <img src="https://pic1.ymatou.com/G02/upload/product/original/M01/61/B6/CgvUBFeGMoaAcBX7AAC_wjXT7d8798_n_w_l.jpg" alt="">
                         <p>Dior/迪奥真我淡香氛淡香水女士50m EDT优雅女士</p>
                         <i>￥499</i>
                         <em>西班牙</em>
                   </a>
             </li>
             <li>
                   <a href="#">
                         <img src="https://pic1.ymatou.com/G02/upload/product/original/M01/61/B6/CgvUBFeGMoaAcBX7AAC_wjXT7d8798_n_w_l.jpg" alt="">
                         <p>Dior/迪奥真我淡香氛淡香水女士50m EDT优雅女士</p>
                         <i>￥499</i>
                         <em>西班牙</em>
                   </a>
             </li>
      </ul>
      
      </div>

      <!-- 热卖地 -->
      <div class="more container" id="more1">   
            <div class="title">
                  <span></span>
                   <h3>热卖地</h3>
            </div>
      </div>
      <ul class="hotLand container">
            <li>
                  <a href="#">
                        <i></i>
                        <img src="https://s2.ymatou.com/home/b5abefb15e5afbb91d82c65df819be22.png" alt="">
                  </a>
            </li>
            <li>
                  <a href="#">
                        <i></i>
                        <img src="https://s2.ymatou.com/home/0ba856d84add76fcb5957592df10e2df.png" alt="">
                  </a>
            </li>
            <li>
                  <a href="#">
                        <i></i>
                        <img src="https://s2.ymatou.com/home/778992f37a38a1d9baa67ab6c4e44b10.png" alt="">
                  </a>
            </li>
            <li>
                  <a href="#">
                        <i></i>
                        <img src="https://s2.ymatou.com/home/733c238ece9a530ddd8bb37d23d25a5d.png" alt="">
                  </a>
            </li>
      </ul>
      
      <!-- 猜你喜欢 -->
      <div class="more container">   
            <div class="title">
                  <span></span>
                   <h3>猜你喜欢</h3>
            </div>
             <a href="#" id="odd">
                   更多<span></span>        
             </a>
      </div>

      <div class="hobbys">
            <div class="hobby container"></div>
      </div>
       


      <div class="btn2 container">
            <button>点击加载更多</button>
      </div>

      <footer>
            <div class="detail">
                  <img src="" alt=""> 
            </div>
            <div class="details container">
                  <ul>
                        <li class="title"><a href="#">购物指南</a></li>
                        <li><a href="#">注册与登录</a></li>
                        <li><a href="#">账户信息维护</a></li>
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">会员体系</a></li>
                        <li><a href="#">常见问题</a></li>
                  </ul>
                  <ul>
                        <li class="title"><a href="#">订单服务</a></li>
                        <li><a href="#">订单状态说明</a></li>
                        <li><a href="#">自动取消订单</a></li>
                        <li><a href="#">上传身份证</a></li>
                  </ul>
                  <ul>
                        <li class="title"><a href="#">支付与配送</a></li>
                        <li><a href="#">支付方式</a></li>
                        <li><a href="#">优惠券和红包</a></li>
                        <li><a href="#">如何提现</a></li>
                        <li><a href="#">配送方式</a></li>
                  </ul>
                  <ul>
                        <li class="title"><a href="#">售后服务</a></li>
                        <li><a href="#">消费维权</a></li>
                        <li><a href="#">纠纷处理规则</a></li>
                        <li><a href="#">退货规则</a></li>
                  </ul>
            </div>

            <div class="problem container">
                  <ul>
                        <li><a href="#">关于码头</a></li>
                        <li>|</li>
                        <li><a href="#">码头招聘</a></li>
                        <li>|</li>
                        <li><a href="#">网站地图</a></li>
                        <li>|</li>
                        <li><a href="#">所有帮助</a></li>
                        <li>|</li>
                        <li><a href="#">海外招南中心</a></li>
                        <li>|</li>
                        <li><a href="#">扫货买手规则</a></li>
                        <li>|</li>
                        <li><a href="#">卖家常见问题</a></li>
                  </ul>
            </div>
            <div class="partner container">
                  <a href="#"><img src="https://s2.ymatou.com/top/08f215631bb50c5af9ab0f8b8ab3ae29.png" alt=""></a>
            </div>
            <div class="address container">
                  <p> © 2009－2020 ymatou.com, All rights reserved 增值电信业务经营许可证：合字B2-20200181 </p>
                  <a href="./index.html">上海洋码头网络技术有限公司 版权所有 备案号（ 沪ICP备11050082号-7 ）</a>
                  <p>上海市静安区江场三路93号12层 </p>
            
            </div>
            
      </footer>
  
      <!-- 回到顶部按钮 -->
      <div class="scrollTop">回到顶部</div>
      
 <script src="./javascripts/pubu.js"></script>
 <script src="./javascripts/init.js"></script> 
<script src="../static/libs/javascripts/swiper.min.js"></script>
<script>
      //轮播图
var mySwiper = new Swiper ('.swiper-container', {
    
    direction: 'horizontal', // 垂直切换选项
    loop: true, // 循环模式选项
    initialSlide: 0,
    speed: 2000,
    autoplay:true,
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
   
  })        
</script>
</body>
</html>